<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {ref} from "vue";
import {showImagePreview} from 'vant';

const data = ref({})
onLoad(async option => {
  const {taskId} = option
  const res = await uni.request({
    url: `http://localhost:3000/getTaskInfo?id=${taskId}`
  })
  data.value = res.data
  console.log(data.value)
})
const conversion = oldText => {
  return oldText
}
const previewImg = (index) => {
  showImagePreview({
    images: data.value.ImageList,
    startPosition: index,
  })
}
</script>

<template>
  <view class="taskInfo content">
    <view class="header">
      <view class="header_header">
        <view class="price">￥{{ data.Reward }}</view>
        <view class="time">剩1天15小时</view>
      </view>
      <view class="container">
        <view class="title">{{ data?.Title }}</view>
        <view class="user">发布者：{{ data?.ClientInformation?.Contact }}</view>
      </view>
    </view>
    <view class="hr"></view>
    <view class="container">
      <view class="status">
        <view class="name">任务进度：<span style="color: red">{{ data.Status }}</span></view>
        <up-steps current="3" style="margin-top: 15px;">
          <up-steps-item desc="10:30" title="待审核">
          </up-steps-item>
          <up-steps-item desc="10:35" title="待分配"></up-steps-item>
          <up-steps-item desc="11:40" title="进行中"></up-steps-item>
          <up-steps-item desc="12:30" title="已完成"></up-steps-item>
          <up-steps-item desc="15:10" title="待审核"></up-steps-item>
          <up-steps-item desc="17:40" title="待反馈"></up-steps-item>
          <up-steps-item desc="19:50" title="已结束"></up-steps-item>
        </up-steps>
        <view class="contentText">
          <view class="title">-- -- -- -- -- -- 任务编号{{ data.TaskID }}-- -- -- -- -- --</view>
          <rich-text :nodes="conversion(`${data.Description}<br/>${data.Requirements}`)" class="text">
          </rich-text>
          <img v-for="(img,i) in data.ImageList" :src="img" alt="" class="image" @click="previewImg(i)"/>
        </view>
      </view>
    </view>
    <view class="footer">
      <up-button icon="star" style="height: 100%;">收藏</up-button>
      <up-button style="height: 100%; color: white; background: #dbbe11">联系雇主</up-button>
      <up-button style="height: 100%;color: white; background: red">交稿</up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.taskInfo {
  width: 100vw;
  height: calc(100vh - 50px);
}

.taskInfo > .header {
  width: 100%;
  height: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.taskInfo > .header > .header_header {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.taskInfo > .header > .header_header > .price {
  color: red;
  line-height: 40px;
  font-size: 20px;
}

.taskInfo > .header > .header_header > .time {
  line-height: 40px;
  font-size: 12px;
  color: #555;
}

.taskInfo > .header > .container {
  width: 100%;
  height: calc(100% - 40px - 20px);
  position: relative;
}

.taskInfo > .header > .container > .title {
  font-weight: bold;
  font-size: 20px;
}

.taskInfo > .header > .container > .user {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #555;
  font-size: 13px;
}

.taskInfo > .hr {
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 10px;
}

.taskInfo > .container {
  width: 100%;
  height: calc(100% - 200px);

  padding: 15px;
}

.taskInfo > .container > .status {
  width: 100%;

  font-size: 15px;
}

.taskInfo > .container > .status > .contentText {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.taskInfo > .container > .status > .contentText > .text {
  width: 100%;
  margin-top: 15rpx;
  font-size: 18px;
  color: #555555;
}

.taskInfo > .footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
}

.image {
  margin-top: 20px;
}
</style>